<template>
	<view class="box">
		<textarea v-model="inputVal" placeholder="请输入您想发布的内容..." style="width: 100%;height: 140px;"
			:maxlength="-1"></textarea>
		<view class="box-img">
			<view class="upload" v-show="fileList.length>0" v-for="(i,index) in fileList" :key="index">
				<view class="upload-img">
					<image :src="i" mode="aspectFit" @click.stop="previewImageClick(i,index)" />
					<view class="delete" @click.stop="delImg(i,index)">
						<van-icon name="cross" size="12" color="#fff" />
					</view>
				</view>
			</view>
			<view class="upload" v-show="fileList.length<2">
				<view class="upload-main" @click="afterRead">
					<van-icon name="photograph" size="24" color="#dcdee0" />
				</view>
			</view>
		</view>
		<view class="box-bot">
			<view class="box-bot-btn" :class="{curBtn:isShowCurBtn}" :style="{'opacity': (loading.publish?0.6:1)}"
				@click="pubBtn">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		postUploadImage,
		delUploadImage,
		postPublishPost
	} from '@/common/momentApi.js'
	export default {
		name: 'Publish',
		data() {
			return {
				inputVal: '',
				fileList: [],
				loading: {
					publish: false
				}
			}
		},
		computed: {
			isShowCurBtn() {
				let a = this.inputVal !== '' || this.fileList.length > 0 ? true : false
				return a
			}
		},
		methods: {
			afterRead() {
				console.log(1)
				// const { file } = event.detail;
				uni.chooseImage({
					count: 2 - this.fileList.length, // 最多选择 2 张图片
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
					success: (res) => {
						console.log(res)
						this.fileList = [...this.fileList, ...res.tempFilePaths]; // 将选择的图片路径保存到 imageList
					}
				})
			},
			async uploadImages() {
				for (let val in this.fileList) {
					console.log(val)
					const res = await postUploadImage({
						type: 2,
						imageName: this.fileList[val]
					})
				}
				// const res = await postUploadImage({type:2,imageName:val})
			},
			delImg(val, index) {
				console.log(111)
				this.fileList.splice(index, 1)
			},
			previewImageClick(val, index) {
				uni.previewImage({
					current: index,
					urls: this.fileList,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 发布按钮
			async pubBtn() {
				if (this.loading.publish) return
				if (!this.isShowCurBtn) return
				let imgArr = []
				this.loading.publish = true
				if (this.fileList.length > 0) {
					for (let val in this.fileList) {
						console.log(val)
						const res = await uni.uploadFile({
							url: `${getApp().globalData.utils.baseUrl }/Forum/UploadImage?type=2&imageName=${this.fileList[val]}`, // 服务器上传接口
							filePath: this.fileList[val],
							name: 'file', // 必须填写，后台用来接收文件
							formData: {
								type: 2,
								'imageName': this.fileList[val], // 其他POST请求中的额外参数
							},
						})
						
						let res1 = JSON.parse(res.data)
						console.log(res1)
						if (res1.data) {
							imgArr = [...imgArr, res1.data]
						} else {
							this.loading.publish = false
							return uni.showToast({
								title: '图片上传失败' + res1.message,
								icon: 'none',
							})
						}
					}
				}
				const params = {
					"content": this.inputVal,
					"images": imgArr
				}
				const resData = await postPublishPost(params)
				if (resData.data) {
					uni.showToast({
						title: '发布成功',
						icon: 'none',
					})
					uni.reLaunch({
						url: `../moments/index`
					});
				} else {
					uni.showToast({
						title: '发布失败' + res.message,
						icon: 'none',
					})
				}
				this.loading.publish = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		width: 100%;
		padding: 10px 15px;
		position: relative;
		box-sizing: border-box;

		&-img {
			margin-top: 10px;
			display: flex;

			.upload {
				padding: 0 8px 8px 0;

				&-main {
					width: 80px;
					height: 80px;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #f7f8fa;
				}

				&-img {
					width: 80px;
					height: 80px;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					background-color: #2e3034;

					.img {
						width: 100%;
						height: 80px;
					}

					.delete {
						width: 20px;
						height: 20px;
						background-color: #2e3034;
						position: absolute;
						top: 0;
						right: 0;
						border-radius: 0 0 0 20px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

			}
		}

		&-bot {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			padding: 0 15px 20px;
			box-sizing: border-box;

			&-btn {
				width: 100%;
				height: 50px;
				line-height: 50px;
				background-color: #eee;
				color: #8a8a8a;
				font-size: 16px;
				text-align: center;
				border-radius: 10px;
			}

			.curBtn {
				background-color: #1f48db;
				color: #fff;
			}
		}
	}
</style>